<template>
  <view class="house-title">{{houseInfo.title}}</view>
  <view class="house-rank u-flex-y-center " @click="$u.route('/pages/index/houseRank')"
    v-if="type == 1 && houseInfo.ranking">
    <image src="@/static/images/01_31de.png" class="rank-img" mode="" v-if="houseInfo.ranking"></image>
    <view class="u-flex-1 u-flex-y-center u-flex-between" v-if="houseInfo.ranking">
      <text> {{houseInfo.ranking.title}} NO.{{houseInfo.ranking.ranking}}</text>
      <image src="@/static/images/01_31ny.png" class="rank-more" mode=""></image>
    </view>
  </view>
  <u-row>
    <u-col span="3">
      <view class="house-info">
        <view>{{houseInfo.market_price}}万</view>
        <view>市场价(总价)</view>
      </view>
    </u-col>
    <u-col span="3">
      <view class="house-info">
        <view>{{houseInfo.price}}万</view>
        <view>优惠价</view>
      </view>
    </u-col>
    <u-col span="3">
      <view class="house-info">
        <view>{{houseInfo.space}}㎡</view>
        <view>建筑面积</view>
      </view>
    </u-col>
    <u-col span="3">
      <view class="house-info">
        <view>{{houseInfo.house_type_text}}</view>
        <view>房型</view>
      </view>
    </u-col>
  </u-row>
  <view class="gap"></view>
  <view class="u-flex-y-center" v-if="type == 1 && houseInfo.coupons && houseInfo.coupons.length">
    <image src="@/static/images/01_31nh.png" class="coupon-img" mode=""></image>
    <view class="u-flex-1 u-flex-y-center u-flex-between coupon-text" >
      <text>{{houseInfo.coupons[0].coupon_title}}抵扣{{houseInfo.coupons[0].coupon_price}}元</text>
      <text>截止时间:{{houseInfo.coupons[0].end_use_time_text}}</text>
    </view>
  </view>
  <view class="house-no">小区房屋编号：{{houseInfo.number}}</view>
  <view class="house-title">
    房屋基本信息
  </view>
  <u-row>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">小区</view>
        <view class="info-value">{{houseInfo.xiaoqu}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">房屋面积</view>
        <view class="info-value">{{houseInfo.space}}㎡</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">区域</view>
        <view class="info-value">{{houseInfo.province}}{{houseInfo.city}}{{houseInfo.district}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">装修情况</view>
        <view class="info-value">{{houseInfo.renovation_text}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">楼层</view>
        <view class="info-value">{{houseInfo.total_floor}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">单价</view>
        <view class="info-value">{{houseInfo.unit_price}}/m²</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">房号</view>
        <view class="info-value">{{houseInfo.house_num}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">产权</view>
        <view class="info-value">{{houseInfo.property_text}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">电梯</view>
        <view class="info-value">{{houseInfo.lift == 1?'有':'无'}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">房屋权限</view>
        <view class="info-value">{{houseInfo.life}}年</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">车库</view>
        <view class="info-value">{{houseInfo.garage == 1?'有':'无'}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">朝向</view>
        <view class="info-value">{{houseInfo.toward}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">储间</view>
        <view class="info-value">{{houseInfo.locker == 1?'有':'无'}}</view>
      </view>
    </u-col>
    <u-col span="6">
      <view class="u-flex-y-center">
        <view class="info-label">发布时间</view>
        <view class="info-value">{{timeFormat(houseInfo.createtime,'yyyy/mm/dd')}}</view>
      </view>
    </u-col>
  </u-row>
  <view class="u-flex u-flex-items-end u-flex-between u-m-t-20" v-if="type == 1">
    <image src="@/static/images/01_9ewfug.png" class="share-img" mode=""></image>
    <view class="u-flex-y-center" @click="_houseLikes">
      <image src="@/static/images/01_31dfgas.png" v-if="houseInfo.is_collect" class="sc-icon" mode=""></image>
      <image src="@/static/images/01_31dfgassdv.png" v-else class="sc-icon" mode=""></image>
      <text class="share-text">收藏({{houseInfo.likes}})</text>
    </view>
    <button class="share-btn" open-type="share">
      <view class="u-flex-y-center">
        <image src="@/static/images/01_31gth.png" class="share-icon" mode=""></image>
        <text class="share-text">分享</text>
      </view>
    </button>
  </view>
</template>

<script setup>
  import { timeFormat } from 'uview-plus';
  import { houseLikes } from '../../../config/api';
  const props = defineProps({
    type: {
      type: [String, Number],
      default: 1
    },
    houseInfo: {
      type: Object,
      default: () => {}
    }
  })
  // 收藏 和取消收藏
  const _houseLikes = () => {
    houseLikes({ id: props.houseInfo.id }).then(res => {
      props.houseInfo.is_collect = !props.houseInfo.is_collect
      if (props.houseInfo.is_collect) props.houseInfo.likes++
      else props.houseInfo.likes--
    })
  }
</script>

<style lang="scss" scoped>
  .house-title {
    font-size: 32rpx;
    font-weight: 800;
    color: #333;
  }

  .house-rank {
    padding: 0 20rpx;
    height: 64rpx;
    font-size: 26rpx;
    color: #fff;
    font-weight: 500;
    background: linear-gradient(180deg, #FF7246 0%, #FF6262 100%);
    border-radius: 16rpx 0rpx 16rpx 0rpx;
    margin-top: 20rpx;

    .rank-img {
      width: 38rpx;
      height: 30rpx;
      margin-right: 16rpx;
    }

    .rank-more {
      width: 42rpx;
      height: 32rpx;
    }
  }

  .house-info {
    color: #E22020;
    font-size: 28rpx;
    text-align: center;
    margin-top: 24rpx;
    font-weight: 800;

    view+view {
      font-size: 24rpx;
      color: #000;
      font-weight: 500;
      margin-top: 16rpx;
    }
  }

  .gap {
    border-top: 1rpx solid rgba(0, 0, 0, 0.08);
    margin-top: 20rpx;
    margin-bottom: 20rpx;
  }

  .coupon-img {
    width: 68rpx;
    height: 50rpx;
  }

  .coupon-text {
    font-size: 28rpx;
    font-weight: 800;
    color: #FF5F35;
    margin-left: 14rpx;

    text+text {
      font-size: 24rpx;
      color: #666;
      font-weight: 500;
    }
  }

  .house-no {
    height: 70rpx;
    background: #F6F6F6;
    border-radius: 12rpx;
    margin-top: 24rpx;
    margin-bottom: 24rpx;
    color: #666;
    line-height: 70rpx;
    padding: 0 24rpx;
    font-size: 24rpx;
  }

  .info-label {
    width: 110rpx;
    margin-right: 10rpx;
    font-size: 26rpx;
    color: #666;
    font-weight: 500;
    margin-top: 16rpx;
  }

  .info-value {
    font-size: 26rpx;
    color: #000;
    font-weight: 500;
    margin-top: 16rpx;
  }

  .share-img {
    width: 322rpx;
    height: 72rpx;
  }

  .sc-icon {
    width: 34rpx;
    height: 34rpx;
    margin-right: 12rpx;
  }

  .share-icon {
    width: 30rpx;
    height: 30rpx;
    margin-right: 12rpx;
  }

  .share-text {
    font-size: 26rpx;
    font-weight: 500;
    color: #000;
  }
</style>